<template>
	<view class="content">
		<!-- 生成海报的组件，生成后图片临时地址保存在 path 变量 -->
		<l-painter isCanvasToTempFilePath @success="path = $event" custom-style="position: fixed; left: 200%"
			css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#1ab7e7 0%, #a7d9f8 100%)">
			<l-painter-image :src="hei.avatar"
				css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="hei.username"
					css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
				<l-painter-text text="分享了一个嘿文，打开嘿板扫一扫" css="color: rgba(255,255,255,.9); font-size: 24rpx" />
			</l-painter-view>
		 <l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<l-painter-image :src="hei.images == undefined ? '' : hei.images[0].src"
					css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
				<l-painter-view css="margin-top: 30rpx">
					<l-painter-text
						css="line-clamp: 1; color: #303133; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
						:text="hei.title"></l-painter-text>
					<l-painter-text
						css="line-clamp: 2; color: #606266; line-height: 1.8em; font-size: 28rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
						:text="hei.content"></l-painter-text>
					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="encrypt('ID[' + heiId + ']')">
					</l-painter-qrcode>
				</l-painter-view>
			</l-painter-view>
		</l-painter>

		<!-- 页面下方弹出的操作菜单 -->
		<u-action-sheet :actions="actionSheet" :closeOnClickOverlay="true" :closeOnClickAction="true"
			:show="showActionSheet" cancelText="取消" @close="onActionSheetClose" @select="onActionSheetSelect">
		</u-action-sheet>
		
		<!-- 吸顶用户信息 -->
		<u-sticky offsetTop="10">
			<view class="sticky-view shadow fadeIn-1s">
				<view class="sticky-user-view" @tap="onUserTap()">
					<image class="sticky-user-avatar" mode="aspectFill"
						:src="(hei.avatar == undefined || hei.avatar == '') ? '/static/images/hei.png' : hei.avatar">
					</image>
					<view class="sticky-user-username-view">
						<text class="sticky-user-username">{{ hei.username }}</text>
						<text class="sticky-user-schoolName" v-if="hei.schoolName != undefined && hei.schoolName != ''">
							{{ hei.schoolName }}
						</text>
					</view>
				</view>
				<view class="sticky-follow-view">
					<text class="iconfont sticky-follow" v-if="!isFollow" @tap="onFollowTap">&#xe8a1;关注</text>
				</view>
			</view>
		</u-sticky>
		<view class="content-inner">
			<!-- 嘿文内容 -->
			<view class="hei-view shadow-light fadeIn-1s">
				<!-- 轮播图 -->
				<view class="hei-swiper">
					<swiper class="swiper" :indicator-dots="true" :current="currentSwiper" indicator-color="#FFFFFF60"
						indicator-active-color="#FFFFFF">
						<swiper-item v-for="(image, i) in hei.images" :key="i">
							<view class="swiper-image-view" @tap="onImageTap(i)">
								<image class="swiper-image" :src="image.src" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				<!-- 嘿文正文内容 -->
				<view class="hei-content-view">
					<view class="hei-title">
						{{ hei.title }}
					</view>
					<view class="hei-content">
						{{ hei.content }}
					</view>
					<view class="hei-time">
						{{ format(hei.createTime) }}
						<text style="margin-left: 20rpx;">浏览：{{hei.views}}</text>
					</view>
				</view>
			</view>

			<!-- 嘿文评论 -->
			<view class="hei-comment-view shadow-light fadeIn-1s">
				<view class="hei-comment-title">共有 {{ hei.comments }} 条评论</view>
				<view class="hei-comment-add-view">
					<image class="hei-comment-add-avatar" mode="aspectFill"
						:src="(myAvatar == undefined || myAvatar == '') ? '/static/images/hei.png' : myAvatar"></image>
					<view class="hei-comment-add-edit" @tap="openPopup">评论支持一下~</view>
				</view>

				<!-- 评论为空提示 -->
				<view class="hei-comment-content-view">
					<u-empty v-if="comments == undefined || comments.length == 0" mode="message"
						icon="http://cdn.uviewui.com/uview/empty/message.png">
					</u-empty>
				</view>

				<!-- 每条评论 -->
				<view class="comment-view" v-for="(comment, i) in comments" :key="i">
					<!-- 父评论 -->
					<uni-row>
						<uni-col :span="3">
							<image class="comment-avatar" mode="aspectFill" @tap="onUserTap(comment.email)"
								:src="(comment.avatar == undefined || comment.avatar == '') ? '/static/images/hei.png' : comment.avatar">
							</image>
						</uni-col>
						<uni-col :span="21">
							<view @tap="onCommentTap(i)">
								<!-- 评论用户名和时间 -->
								<view class="comment-username">
									<text>{{ comment.username }}</text>
									<text class="comment-child-id">#{{ comment.commentId}}</text>
									<text class="comment-time">
										{{ format(comment.createTime) }}
									</text>
								</view>
								<!-- 评论内容 -->
								<view class="comment-content">
									<text>{{ comment.content }}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<!-- 子评论 -->
					<view class="comment-children" v-for="(child, j) in comment.children" :key="j">
						<uni-row>
							<uni-col :span="2">
								<image class="comment-child-avatar" mode="aspectFill" @tap="onUserTap(child.email)"
									:src="(child.avatar == undefined || child.avatar == '') ? '/static/images/hei.png' : child.avatar">
								</image>
							</uni-col>
							<uni-col :span="22">
								<view @tap="onCommentChildTap(i, j)">
									<!-- 评论用户名和时间 -->
									<view class="comment-child-username">
										<text>{{ child.username }}</text>
										<text class="comment-child-id">#{{ child.commentId}}</text>
										<text class="comment-child-time">
											{{ format(child.createTime) }}
										</text>
									</view>
									<!-- 评论内容 -->
									<view class="comment-child-content">
										<text class="comment-child-reply"
											v-if="child.replyCommentId != undefined && child.replyCommentId != ''">
											@{{ child.replyCommentId + ' '}}
										</text>
										<text>{{ child.content }}</text>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-view shadow fadeIn-1s">
			<view class="bottom-edit" @tap="openPopup">
				<text class="iconfont" style="margin-right: 10rpx;">&#xe761;</text>
				{{ hei.comments == 0 ? "快来抢第一个板凳吧~" : "说点什么支持一下吧~" }}
			</view>
			<view class="bottom-btn">
				<view class="bottom-btn-like iconfont" @tap="onLikeTap" :class="hei.like ? 'like':''">&#xe8a8;喜欢</view>
				<view class="bottom-btn-collect iconfont" @tap="onCollectTap" :class="hei.collect ? 'collect':''">&#xe882;收藏
				</view>
			</view>
		</view>

		<!-- 发布评论弹出层 -->
		<u-popup :show="showPopup" mode="bottom" :round="20" @close="onPopupClose">
			<view class="comment-popup">
				<view class="comment-popup-reply" v-if="popup_replyUsername != ''">{{ popup_replyUsername }}</view>
				<view class="comment-popup-input">
					<u--textarea class="comment-input" v-model="popup_content" maxlength="200" height="120"
						placeholder="随便说点什么" border="none">
					</u--textarea>
				</view>
				<button class="button popup-reply" @tap="onCommentSubmit">回复</button>
				<button class="button popup-close" @tap="onPopupClose">关闭</button>
			</view>
		</u-popup>
		
		<!-- 用于展示嘿文分享海报的弹出层 -->
		<u-popup :show="showSharePopup" :round="20" mode="center" @close="onSharePopupClose">
			<view class="share-popup">
				<text v-if="path == ''">请稍等，分享海报正在加载中</text>
				<image :src="path" mode="widthFix" v-if="path != ''"></image>
				<button class="button share-btn" @tap="onSaveShareTap" v-if="path != ''">点击保存分享海报到相册</button>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		getHeiById,
		addHeiLike,
		addHeiCollect,
		deleteHeiLike,
		deleteHeiCollect
	} from "@/network/HeiApi.js";
	import {
		getComment,
		addComment,
		deleteComment
	} from "@/network/CommentApi.js";
	import {
		isFollow,
		addFollow
	} from "@/network/UserApi.js";
	export default {
		data() {
			return {
				heiId: "",
				hei: [],
				comments: [],
				myAvatar: "",
				
				// 标记用户是否关注嘿文发布者
				isFollow: true,

				// 标记当前是否在提交数据，防止频繁点击
				uploading: false,

				currentSwiper: 0,

				// ActionSheet 操作菜单内容
				actionSheet: [{
						name: "回复"
					},
					{
						name: "删除"
					}
				],
				// 评论选项菜单是否显示
				showActionSheet: false,

				// 是否显示发布评论的弹出层
				showPopup: false,

				// 点击评论后此变量记录点击的评论 ID 
				currentCommentId: "",

				// 点击评论后此变量记录点击的评论的父评论 ID（如果有）
				currentCommentParentId: "",


				// 弹出层中的评论内容
				popup_content: "",

				// 弹出层中显示回复的用户名
				popup_replyUsername: "",

				// 是否显示嘿文分享海报的弹出层
				showSharePopup: false,
				// 用于存储嘿文分享海报的图片临时地址
				path: "",
				
				// 标记查看当前嘿文是否是从用户信息页过来的
				// 如果此项为 true，查看自己信息的时候就是返回，而不是跳转页面
				fromUserPage: false,
				
			}
		},

		onLoad(options) {
			this.heiId = options.heiId;
			this.fromUserPage = options.fromUserPage == undefined ? false : Boolean(options.fromUserPage);
			this.myAvatar = this.getData("avatar");
			this.refreshHei();
		},

		/**
		 * 返回事件
		 */
		onBackPress() {
			// 如果选项菜单或者弹出层正在显示
			// 返回事件将先关闭它们，而不是直接退出当前页
			if (this.showPopup) {
				this.showPopup = false;
				return true;
			}
			if (this.showActionSheet) {
				this.showActionSheet = false;
				return true;
			}
			if (this.showSharePopup) {
				this.showSharePopup = false;
				return true;
			}
			return false;
		},

		/**
		 * 导航栏按钮点击事件
		 * @param {Object} res
		 */
		onNavigationBarButtonTap(res) {
			if (res.index == 0) {
				// 分享嘿文
				this.showSharePopup = true;
			}
		},

		methods: {
			/**
			 * 获取嘿文
			 */
			refreshHei: function() {
				// 获取嘿文数据
				getHeiById(this.heiId).then(data => {
					this.hei = data.content;
					// 如果当前嘿文是自己发布的，就默认已关注（隐藏关注按钮）
					if (this.getData("email") == this.hei.email) {
						this.isFollow = true;
					} else {
						// 不是自己的嘿文，就检查是否已经关注嘿文发布者
						this.refreshIsFollow();
					}
					
				}).catch(err => {
					uni.showModal({
						title: "获取嘿文失败",
						content: err
					});
				});
				this.refreshComment();
			},

			/**
			 * 获取嘿文评论
			 */
			refreshComment: function() {
				getComment(this.heiId).then(data => {
					this.comments = data.content;

					// 刷新 hei 变量的 comments 字段
					this.refreshHeiComments();
				}).catch(err => {
					uni.showModal({
						title: "获取评论失败",
						content: err
					});
				});
			},
			
			/**
			 * 判断当前用户是否关注嘿文发布者
			 */
			refreshIsFollow: function() {
				isFollow(this.hei.email).then(data => {
					this.isFollow = data.content.isFollow;
				});
			},

			/**
			 * 喜欢单击事件
			 */
			onLikeTap: function() {
				if (this.uploading) {
					// 当前还有网络请求未完成
					this.toast("请勿频繁点击");
					return;
				}

				let that = this;
				this.uploading = true;
				if (this.hei.like) {
					// 删除喜欢的嘿文
					deleteHeiLike(this.heiId).then(data => {
						that.hei.like = false;
						this.uploading = false;
					}).catch(err => {
						this.uploading = false;
						uni.showModal({
							title: "取消喜欢失败",
							content: err
						});
					});
				} else {
					// 添加喜欢的嘿文
					addHeiLike(this.heiId).then(data => {
						that.hei.like = true;
						this.uploading = false;
					}).catch(err => {
						this.uploading = false;
						uni.showModal({
							title: "添加喜欢失败",
							content: err
						});
					});
				}
			},

			/**
			 * 收藏单击事件
			 */
			onCollectTap: function() {
				if (this.uploading) {
					// 当前还有网络请求未完成
					this.toast("请勿频繁点击");
					return;
				}

				let that = this;
				this.uploading = true;
				if (this.hei.collect) {
					// 删除收藏的嘿文
					deleteHeiCollect(this.heiId).then(data => {
						that.hei.collect = false;
						this.uploading = false;
					}).catch(err => {
						this.uploading = false;
						uni.showModal({
							title: "取消收藏失败",
							content: err
						});
					});
				} else {
					// 添加收藏的嘿文
					addHeiCollect(this.heiId).then(data => {
						that.hei.collect = true;
						this.uploading = false;
					}).catch(err => {
						this.uploading = false;
						uni.showModal({
							title: "添加收藏失败",
							content: err
						});
					});
				}
			},

			/**
			 * swiper 中图片点击事件，预览图片
			 * @param {Object} i
			 */
			onImageTap: function(i) {
				let array = [];
				for (let i = 0; i < this.hei.images.length; i++) {
					array.push(this.hei.images[i].src);
				}
				uni.previewImage({
					urls: array,
					current: i
				});
			},

			/**
			 * 操作菜单取消按钮事件
			 */
			onActionSheetClose: function() {
				this.showActionSheet = false;
			},

			/**
			 * 操作菜单选择事件
			 * @param {Object} e
			 */
			onActionSheetSelect: function(event) {
				let that = this;
				let optionName = event.name;
				if (optionName == "回复") {
					this.showPopup = true;
				} else if (optionName == "删除") {
					uni.showModal({
						title: "确认删除",
						content: "确认要删除评论吗",
						success: function(res) {
							if (res.confirm) {
								deleteComment(that.currentCommentId).then(data => {
									that.toast("删除成功");
									that.refreshComment();
								}).catch(err => {
									uni.showModal({
										title: "删除失败",
										content: err
									});
								});
							}
						}
					})
				}
			},

			/**
			 * 评论点击事件
			 * @param {Object} i
			 */
			onCommentTap: function(i) {
				this.currentCommentId = this.comments[i].commentId;
				this.currentCommentParentId = this.currentCommentId;
				let username = this.comments[i].username;
				this.popup_replyUsername = "回复：" + username;
				if (this.comments[i].email == this.getData("email")) {
					// 只有点击自己的评论才显示操作菜单
					this.showActionSheet = true;
				} else {
					// 点击他人评论直接弹出回复面板
					this.showPopup = true;
				}
			},

			/**
			 * 子评论点击事件
			 * @param {Object} i
			 */
			onCommentChildTap: function(i, j) {
				let comment = this.comments[i].children[j];
				let username = comment.username;
				let commentId = comment.commentId;
				this.currentCommentId = commentId;
				// 当前事件是子评论点击事件，所以这里要记录父评论 ID
				this.currentCommentParentId = this.comments[i].commentId;

				this.popup_replyUsername = "回复：" + username + " @" + commentId;
				if (comment.email == this.getData("email")) {
					// 只有点击自己的评论才显示操作菜单
					this.showActionSheet = true;
				} else {
					// 点击他人评论直接弹出回复面板
					this.showPopup = true;
				}
			},

			/**
			 * 评论回复弹出层关闭事件
			 */
			onPopupClose: function() {
				this.showPopup = false;
			},
			
			/**
			 * 嘿文分享海报弹出层关闭事件
			 */
			onSharePopupClose: function() {
				this.showSharePopup = false;
			},

			/**
			 * 显示弹出层
			 */
			openPopup: function() {
				// 此事件只会被回复嘿文调用，所以这里要清空之前可能设置的回复人信息
				this.popup_replyUsername = "";
				this.currentCommentParentId = "";
				this.currentCommentId = "";
				this.showPopup = true;
			},


			/**
			 * 回复评论点击事件heiId, email, content, parentId, replyId
			 */
			onCommentSubmit: function() {
				let that = this;
				if (this.popup_content == "") {
					this.toast("请填写回复内容");
					return;
				}

				this.showPopup = false;
				addComment(this.heiId, this.popup_content,
					this.currentCommentParentId, this.currentCommentId).then(data => {
					this.popup_content = "";
					that.toast("回复成功");
					that.refreshComment();
				}).catch(err => {
					uni.showModal({
						title: "回复失败",
						content: err
					});
				});
			},

			/**
			 * 用于根据评论数量更新 Hei 的 comments 字段
			 */
			refreshHeiComments: function() {
				let count = 0;
				for (let i = 0; i < this.comments.length; i++) {
					count++;
					if (this.comments[i].children != undefined) {
						count += this.comments[i].children.length;
					}
				}
				this.hei.comments = count;
			},
			
			/**
			 * 保存分享海报到相册按钮点击事件
			 */
			onSaveShareTap: function() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: function(res) {
						that.toast("保存到相册成功");
					},
					fail: function(err) {
						uni.showModal({
							title: "保存失败",
							content: err.errMsg
						});
					}
				});
			},
			
			/**
			 * 关注用户点击事件
			 */
			onFollowTap: function() {
				let that = this;
				let email = this.getData("email");
				let followEmail = this.hei.email;
				addFollow(followEmail).then(data => {
					that.toast("关注成功");
					that.isFollow = true;
				}).catch(err => {
					uni.showModal({
						title: "关注失败",
						content: err
					});
				})
			},
			
			/**
			 * 用户点击事件
			 * @param {String} email 如果为空就访问嘿文发布者页面，否则访问指定用户
			 */
			onUserTap: function(email="") {
				let mEmail = (email == "") ? this.hei.email : email;
				if (mEmail == this.getData("email")) {
					// 访问自己的用户页
					if (this.fromUserPage) {
						// 当前是从用户信息页过来的
						// 这里是返回而不是跳转
						uni.navigateBack();
						return;
					}
				}
				uni.navigateTo({
					url: "/pages/user/user?email=" + mEmail
				});
				
				
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;
	}

	.sticky-view {
		background-color: white;
		padding: 20rpx;
		padding-bottom: 10rpx;
		border-radius: 99px;
		position: relative;

		background: rgba(255, 255, 255, .6);
		-webkit-backdrop-filter: blur(28px);
		backdrop-filter: blur(28px);
		
		transition: ease-out all .2s;
	}
	
	
	.sticky-view:active {
		background-color: $u-info-light;
	}
	
	.sticky-user-view {
		width: 82%;
	}

	.sticky-user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 999px;
	}

	.sticky-user-username-view {
		display: inline-block;
		vertical-align: top;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
	}

	.sticky-user-username {
		font-size: 32rpx;
	}

	.sticky-user-schoolName {
		font-size: 20rpx;
		padding: 5rpx;
		padding-left: 8rpx;
		padding-right: 8rpx;
		vertical-align: top;
		margin-left: 10rpx;
		background-color: $u-primary;
		color: white;
		border-radius: 5px;
	}

	.sticky-follow-view {
		position: absolute;
		height: 60rpx;
		line-height: 60rpx;
		top: 20rpx;
		right: 30rpx;
	}

	.sticky-follow {
		font-size: 26rpx;
		font-weight: bold;
		color: $u-primary;
	}

	.content-inner {
		padding-bottom: 100rpx;
	}

	.hei-view {
		background-color: white;
		margin-top: 20rpx;
		border-radius: 20px;
		overflow: hidden;
	}

	.hei-swiper {
		height: 800rpx;
	}

	.swiper {
		height: 800rpx;
	}

	.swiper-image {
		height: 800rpx;
		width: 100%;
		border-radius: 20px 20px 0px 0px;
	}

	.hei-content-view {
		padding: 20rpx;
	}

	.hei-title {
		font-size: 30rpx;
		font-weight: bold;
		color: var(--titleColor);
	}

	.hei-content {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: var(--contentColor);
	}

	.hei-time {
		color: var(--divideColor);
		margin-top: 30rpx;
		font-size: 22rpx;
	}

	.hei-comment-view {
		background-color: white;
		margin-top: 20rpx;
		border-radius: 20px;
		padding: 20rpx;
	}

	.hei-comment-title {
		color: var(--secColor);
		border-bottom: 1px solid $u-info-light;
		padding-bottom: 10rpx;
		font-size: 26rpx;
	}

	.hei-comment-add-view {
		margin-top: 20rpx;
		position: relative;
	}

	.hei-comment-add-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 99px;
	}

	.hei-comment-add-edit {
		display: inline-block;
		vertical-align: top;
		height: 60rpx;
		line-height: 60rpx;
		background-color: $u-info-light;
		border-radius: 20px;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: var(--divideColor);
		width: 80%;
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.hei-comment-content-view {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.bottom-view {
		position: fixed;
		background-color: white;
		height: 100rpx;
		width: 100%;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bottom-edit {
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 15rpx;
		background-color: red;
		background-color: $u-info-light;
		color: var(--secColor);
		border-radius: 20px;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-top: 1px solid $u-info-light;
		font-size: 24rpx;
		display: inline-block;
	}

	.bottom-btn {
		display: inline-block;
		height: 70rpx;
		line-height: 70rpx;
		width: 37%;
		margin-left: 20rpx;
		border-radius: 20px;
		font-size: 24rpx;
		vertical-align: top;
		margin-top: 15rpx;
	}

	.bottom-btn-like {
		display: inline-block;
		width: 50%;
		background-color: $u-info-light;
		text-align: center;
		border-radius: 20px 0px 0px 20px;
		color: var(--contentColor);
	}

	.bottom-btn-collect {
		display: inline-block;
		background-color: yellow;
		width: 50%;
		text-align: center;
		border-radius: 0px 20px 20px 0px;
		background-color: $u-info-light;
		color: var(--contentColor);
	}

	.like {
		background-color: $u-error;
		color: white;
	}

	.collect {
		background-color: $u-warning;
		color: white;
	}

	.comment-view {
		margin-bottom: 20rpx;
	}

	.comment-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 999px;
	}

	.comment-username {
		color: var(--secColor);
		font-size: 24rpx;
		vertical-align: top;
		position: relative;
	}

	.comment-time {
		color: var(--divideColor);
		font-size: 20rpx;
		position: absolute;
		right: 10rpx;
	}

	.comment-content {
		color: var(--titleColor);
		font-size: 28rpx;
	}

	.comment-children {
		margin-top: 20rpx;
		margin-left: 80rpx;
	}

	.comment-child-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 999px;
	}

	.comment-child-username {
		color: var(--secColor);
		font-size: 24rpx;
		vertical-align: top;
		position: relative;
	}

	.comment-child-id {
		color: $u-primary;
		margin-left: 10rpx;
	}

	.comment-child-time {
		color: var(--divideColor);
		font-size: 20rpx;
		position: absolute;
		right: 10rpx;
	}

	.comment-child-content {
		color: var(--titleColor);
		font-size: 28rpx;
	}

	.comment-child-reply {
		color: $u-primary;
	}

	.comment-popup {
		padding: 30rpx;
	}

	.popup-reply {
		margin-bottom: 20rpx;
	}

	.popup-close {
		background-color: $u-info;
	}

	.popup-close:active {
		background-color: $u-info-dark;
	}

	.comment-popup-input {
		border: 1px solid $u-info-disabled;
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.comment-popup-reply {
		color: $u-primary;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.share-popup {
		padding: 30rpx;
	}
	
	.share-popup image {
		border-radius: 20px;
		margin-bottom: 20rpx;
	}
</style>
